.image_position {
    display: flex;
    justify-content: center;
    align-content: center;
  }
  .header_ {
    position: relative !important;
    width: 100vw;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    background: #fff;
  }
  .image_position>div {
    position: absolute;
    /* background: linear-gradient(135deg, #c71eeb 0%, #4665f7 100%); */
    border-radius: 0px 2.9vw 0px 2.9vw;
    width: 13.5vw;
    height: 6.3vw;
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 6.3vw;
    right: 0;
    top: 0vw;
  }

  .image_position>img {
    width: 41vw;
    height: 41vw;
  }

  .dress_load {
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  .dress_load_load {
    margin-top: 40vh;
  }

  .user_list>div>span:nth-of-type(1) {
    font-size: 3.6vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }

  .user_list>div>span:nth-of-type(2) {
    font-size: 3vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
  }

  .user_list>div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 2vw;
  }

  .user_list>img {
    width: 13.4vw;
    height: 13.4vw;
    border-radius: 50%;
  }

  .user_list {
    width: 100%;
    height: 13.4vw;
    display: flex;
    margin: 2vw 0;
  }

  .search {
    width: 90vw;
    margin: 5.8vw auto 2vw;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
  }

  .sendFriends input::placeholder {
    color: rgb(235, 229, 229) !important;
    font-size: 3.4vw;
    letter-spacing: 1px;
  }

  .sendFriends>div:nth-of-type(2)>input {
    width: 90%;
    height: 100%;
    color: #ffffff;
    background: rgba(141, 176, 250, 0);
    border: 0;
  }

  .sendFriends>div:nth-of-type(2) {
    width: 90vw;
    height: 8.7vw;
    border-radius: 5vw;
    background: rgba(141, 176, 250, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sendFriends>div:nth-of-type(1) {
    font-size: 4.4vw;
    padding: 4.6vw 0 4.8vw 0;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }

  .sendFriends {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
  }

  .AdditionSubtraction>div:nth-of-type(2) {
    width: 16vw;
    height: 7.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1vw;
    background: rgba(141, 176, 250, 0.2);
  }

  .AdditionSubtraction>div>input {
    width: 100%;
    height: 100%;
    background-color: rgba(141, 176, 250, 0.1);
    border: 0;
    text-align: center;
    color: #ffffff;
  }

  .jia {
    width: 4vw;
    height: 1vw;
    border-radius: 1vw;
    color: #ffffff;
    background: #fff;
  }

  .jian {
    width: 3.5vw;
    height: 0.7vw;
    border-radius: 1vw;
    color: #ffffff;
    background: #fff;
  }

  .AdditionSubtraction>div:nth-of-type(1) {
    width: 7.2vw;
    height: 7.2vw;
    border-radius: 50%;
    background: rgba(141, 176, 250, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .AdditionSubtraction>div:nth-of-type(3) {
    width: 7.2vw;
    height: 7.2vw;
    border-radius: 50%;
    background: rgba(141, 176, 250, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6.5vw;
    font-weight: 500;
  }

  .OwnExchange>span:nth-of-type(1) {
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    padding: 4.8vw 0 6.2vw 0;
  }

  .OwnExchange>div:nth-of-type(1) {
    background: #18235b;
    border-radius: 2.9vw;
    width: 48vw;
    height: 42vw;
    position: relative;
  }

  .OwnExchange>span:nth-of-type(2) {
    font-size: 2.6vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffe048;
  }

  .OwnExchange>div:nth-of-type(2) {
    height: 9vw;
    width: 38vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2.4vw 0 2.4vw 0;
  }

  .OwnExchange>div:nth-of-type(3)>img {
    width: 5vw;
    height: 5.8vw;
    margin: 0 1vw;
  }

  .OwnExchange>div:nth-of-type(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #64d4ff 0%, #3072ff 100%, #3072ff 100%);
    border-radius: 5.5vw;
    padding: 2vw 24vw;
    font-size: 3.8vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-top: 2vw;
  }

  .OwnExchange {
    width: 100vw;
    height: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
  }

  .getRules_s {
    z-index: 2002;
    position: fixed;
    width: 100vw;
    bottom: 0vw;
    /* height: 112vw; */
    background: #18235b;
    border-radius: 4.8vw 4.8vw 0px 0px;
    overflow: hidden;
    animation: fadeBottomIn 0.3s;
  }

  @keyframes fadeBottomIn {
    0% {
      transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }

    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  .overlay {
    z-index: 2001;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .box_fa>div:nth-of-type(1)>img {
    width: 3.2vw;
    height: 3.8vw;
    padding-right: 1vw;
  }

  .box_fa>div:nth-of-type(1)>span {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #b2d6ff;
    font-size: 2.9vw;
  }

  .box_fa>div:nth-of-type(1) {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box_fa>span:nth-of-type(1) {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    font-size: 3.3vw;
    padding: 1vw 0;
  }

  .box_fa>span:nth-of-type(2) {
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #babbe1;
    padding: 0 0 1vw 0;
    font-size: 2.4vw;
  }

  .box_fa>img {
    width: 20vw;
    height: 20vw;
  }

  .box_fa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }

  .button_fa {
    margin-top: 2.9vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .button_fa>div:nth-of-type(1) {
    background: linear-gradient(135deg, #64d4ff 0%, #3072ff 100%, #3072ff 100%);
  }

  .button_fa>div:nth-of-type(2) {
    background: linear-gradient(135deg, #ffc450 0%, #e29f1c 100%);
  }

  .button_fa>div {
    font-size: 3.3vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    border-radius: 3.9vw;
    padding: 1vw 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 4vw;
  }

  .button_fa_>div {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    border-radius: 5vw;
    padding: 1vw 6vw;
  }

  .border_list>div:nth-of-type(1) {
    width: 28.5vw;
    height: 34.3vw;
    background: #05072f;
    border-radius: 2vw;
  }

  .border_list_>div:nth-of-type(1) {
    position: absolute;
    width: 9.4vw;
    height: 4.3vw;
    /* background: linear-gradient(135deg, #c71eeb 0%, #4665f7 100%); */
    border-radius: 0px 2vw 0px 2vw;
    font-size: 2.66vw;
    /* color: #fff; */
    text-align: center;
    line-height: 4.8vw;
    right: 0vw;
  }

  .border_list_>div:nth-of-type(2) {
    width: 28.5vw;
    height: 38.6vw;
    background: #05072f;
    border-radius: 2vw;
  }

  .border_list_ {
    position: relative;
  }

  .body_content>div {
    width: 28.5vw;
    height: 42.3vw;
    margin-right: 2.1vw;
    margin-bottom: 4.8vw;
    display: flex;
    flex-direction: column;
  }

  .body_content_>div {
    height: 48.3vw;
  }

  .body_content {
    width: 92vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }

  .nth_farmg>div>img {
    width: 4.8vw;
    height: 5.6vw;
    vertical-align: sub;
  }

  .nth_farmg>div>span {
    font-size: 3.86vw;
    font-family: MicrosoftYaHeiSemibold;
    color: #ffffff;
  }

  .nth_farmg>span {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #5b5d91;
    font-size: 2.8vw;
    padding-bottom: 2vw;
  }

  .fragment {
    width: 92vw;
    height: 17.4vw;
    margin: 4.12vw auto 2.23vw;
    background: #05072f;
    border-radius: 2.4vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .fragment>div:nth-of-type(1) {
    width: 45vw;
    height: 17.4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .fragment>div:nth-of-type(2) {
    width: 1px;
    height: 4.8vw;
    background: #5b5d91;
  }

  .fragment>div:nth-of-type(3) {
    width: 45vw;
    height: 17.4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .exchange-record {
    font-size: 2.9vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active {
    font-size: 4.3vw !important;
    font-weight: 500 !important;
    font-family: PingFangSC-Medium, PingFang SC !important;
  }

  .title_>div>div {
    width: 3.8vw;
    margin-top: 2vw;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
    position: absolute;
    bottom: 0;
  }

  .title_>div>span {
    font-size: 3.8vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }

  .title_>div {
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 28px;
  }

  .title_ {
    width: 40vw;
    display: flex;
    justify-content: space-between;
  }

  .head_tabbar>div:nth-of-type(1)>img {
    width: 2vw;
    height: 4vw;
    transform: rotate(180deg);
    margin-top: 1vw;
  }

  .head_tabbar>div:nth-of-type(1) {
    width: 10vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .head_tabbar {
    height: 8vw;
    width: 92vw;
    margin: 0 auto;
    /* margin: 14vw auto 0; */
    display: flex;
    align-content: center;
    justify-content: space-between;
    color: #ffffff;
  }

  .dressUpExchange {
    width: 100vw;
    /* height: 100vh; */
    background: url(@/assets/images/playrules/di.jpg);
    background-size: cover;
  }

  .dressUpExchange1 {
    height: 100vh;
  }

  /* .dressUpExchange2 {
    height: auto;
  } */

  /* @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  html,
  body {
    height: 812px;
  }
} */
  .focusState {
    position: absolute;
  }